Using a graphicbox 300 pixels wide and 29 pixels high and two bitmaps each 300x25 pixels enables different graphical effects to be obtained. Drawing the bitmaps progressively along the graphicbox creates a sliding progress bar. The direction can be conventionally left to right or right to left if desired. The bitmap design is limited only by your graphical skills and many other uses apart from progress bars can be found for this method. Open a 300x25 blank canvas in your favourite graphics design program to draw whatever style bar suits your application. It could even be a stretched photograh. Code for both horizontal and vertical progress bars is provided below and also in file progress.zip together with three demo bitmaps.

You will need to download the zipped archive of this newsletter to locate progress.zip

'progress1.bas
nomainwin
WindowWidth=317
barWidth = 300
stylebits #1.pb, 0,_WS_BORDER,_WS_EX_CLIENTEDGE,0
graphicbox #1.pb, 5, 10, barWidth, 29
button #1.start, "Start", [start], ul, 120, 60
open "Progress bar" for window_nf as #1
#1, "trapclose [quit]"
#1.pb, "down;font arial 12"
loadbmp "progbar1","progbar1.bmp"
loadbmp "progbar2","progbar2.bmp"
wait

[start]
count=1
do
'increment left to right
    #1.pb, "cls;flush bar"
    ' starting x coord for drawbmp command is -300 pixels, ie the bitmap is totally outside the graphicbox
    x = -1*barWidth '
    do
    	'increment bitmap drawing position by 5 pixels, giving 60 steps to fill the progress bar	
        x = x + 5
        #1.pb, "drawbmp progbar1 ";x;" 0"
    gosub [delay]
    loop until x = 0
    #1.pb, "flush bar "

'decrement right to left
    ' starting x coord for drawbmp command is +300 pixels, ie at the righthand edge of graphicbox 
    x = barWidth
    do
    	'decrement bitmap drawing position by 5 pixels, giving 60 steps to fill the progress bar
        x = x - 5
        #1.pb, "drawbmp progbar2 ";x;" 0"
    gosub [delay]
    loop until x = 0
    count=count+1
    #1.pb, "delsegment bar"
loop until count=3
    #1.pb, "cls;fill black;color white;backcolor black;place 100 17;\Finished"
    #1.pb, "flush bar"
    wait

[quit]
    unloadbmp "progbar1"
    unloadbmp "progbar2"
    close #1
end

[delay]
        timer 50, [go]
        wait
        scan
[go]
        timer 0
return

The second example generates a vertical progress bar by redrawing a bitmap progressively up or down the graphicbox. In this case the bitmap will obviously need to to be 25 pixels wide and 300 pixels high.

Tip: you can use bitmaps drawn for the horizontal progress bar, just rotate the bitmap by 90 degrees in your graphics software and save with a new name.

'progress2.bas
nomainwin
WindowWidth=317
barHeight = 300
stylebits #1.pb, 0,_WS_BORDER,_WS_EX_CLIENTEDGE,0
graphicbox #1.pb, 15, 10, 29, barHeight
button #1.start, "Start", [start], ul, 120, 60
open "Progress bar" for window_nf as #1
#1, "trapclose [quit]"
#1.pb, "down"
loadbmp "progbar","progbar3.bmp"
wait

[start]
count=1
do
'increment bottom to top
    #1.pb, "cls;flush bar"
    y = barHeight
    do
        y = y - 5
        #1.pb, "drawbmp progbar 0 ";y
    gosub [delay]
    loop until y = 0
    #1.pb, "delsegment bar"

'increment top to bottom
    #1.pb, "cls;flush bar"
    y = -1*barHeight
    do
        y = y + 5
        #1.pb, "drawbmp progbar 0 ";y
    gosub [delay]
    loop until y = 0
    count=count+1
    #1.pb, "delsegment bar"

loop until count=3
    #1.pb, "flush bar"
    wait

[quit]
    unloadbmp "progbar"
    close #1
end

[delay]
        timer 50, [go]
        wait
        scan
[go]
        timer 0
return

---